/**
 * Created by mapbar_front on 2019/8/6.
 */
import React,{Component} from 'react';


// const FancyButton=React.forwardRef((props,ref)=>{
//     return <div>
//                 <input type="text"/>
//                 <button onClick={props.theme}>
//                     {props.children}
//                 </button>
//             </div>
// })


const FancyButton = React.forwardRef((props,ref)=>{
    console.log('ref',ref);
    return  <div>
                <button onClick={props.theme}>btn</button>
                <input type="text" ref={ref}/>
            </div>
})

function Button(props){
    return <input type="text"/>
}


class Ref12 extends Component{
    constructor(props){
        super(props);
        this.ref = React.createRef();
    }

    handleClick=()=>{
        console.log('this.ref',this.ref);
        this.ref.current.focus();
    }
    render(){
        return(
            <div>
                <FancyButton ref={this.ref} theme={ this.handleClick }>
                    FancyButton
                </FancyButton>
            </div>
        )
    }
}
export default Ref12;
